<%@ page language="java" pageEncoding="utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>视频资料列表</title>
    <jsp:include page="/IncludeJS.jsp"></jsp:include>
</head>
<body>
<script type="text/javascript">
    $(function () {
        var pager = $(".easyui-datagrid").datagrid('getPager');
        $(pager).pagination({
            total:${pager.totalRows},
            pageSize:${pager.pageRow},
            displayMsg: '{from}-{to}/{total}',
            pageNumber:${pager.cur_page},
            afterPageText: '页，共{pages}页',
            pageList: [100, 500, 1000, 10000],
            loading: false,
            showPageList: true,
            showRefresh: true,
            //刷新方法
            onBeforeRefresh: function (p, s) {
                location.href = "${pageContext.request.contextPath }/video/list?current=" + p + "&size=" + s;
            },
            onSelectPage: function (p, s) {
                location.href = "${pageContext.request.contextPath }/video/list?current=" + p + "&size=" + s;
            }
        });
        $('#changesize').datagrid('resize', {
            height: document.body.clientHeight - 45
        });
    });

    function edit() {
        var ids = $('input[name="id"]:checked');
        var len = ids.length;
        if (ids.length == 0) {
            alert("请选择要修改的视频");
            return;
        }
        if (ids.length > 1) {
            alert("只能选择一部视频");
            return;
        }
        var arr = "";
        ids.each(function (i, d) {
            if ((i + 1) != len) {
                arr += $(d).val() + ",";
            } else {
                arr += $(d).val();
            }
        })
        url = "${pageContext.request.contextPath }/video/update?vid=" + arr;
        location.href = url;
    }

    function getRowData(value, rec) {
        var id = rec.id;
    }

    function save() {
        document.forms[1].submit();
    }

    function add() {
        var url = "${pageContext.request.contextPath }/video/add";
        // var title="区域新增";
        // addTab1(title, url);
        location.href = url;
    }

    function del() {
        var ids = $('input[name="id"]:checked');
        var len = ids.length;
        if (ids.length == 0) {
            alert("请选择要删除的视频");
            return;
        }
        if (!confirm('确认删除视频!')) {
            return;
        }
        var arr = "";
        ids.each(function (i, d) {
            if ((i + 1) != len) {
                arr += $(d).val() + ",";
            } else {
                arr += $(d).val();
            }
        })
        var url = "${pageContext.request.contextPath }/video/del?ids=" + arr;
        location.href = url;
    }

    function playVideo(){
        var ids = $('input[name="id"]:checked');
        if (ids.length == 0){
            alert("请选择视频")
            return false
        }
        if (ids.length != 1){
            alert("只能选择一条视频")
            return false
        }
        var selectRow = $("#changesize").datagrid('getSelected');
        $('#video-window').window({

            title:selectRow.title,

            onBeforeClose:function () {
                $('#video')[0].pause();
            }

        })
        $('#video-window').window('open');
        $('#video').attr('src',selectRow.url);
    }

    if ("${msg}" != null && "${msg}".length > 0) {
        alert("${msg}");
    }
</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
       BACKGROUND="${pageContext.request.contextPath }/images/maintitle.jpg" class="tablelist2">
    <form action="${pageContext.request.contextPath }/video/list" method="post">
        <tr class="tableselect2">
            <td align="left">
                <div class="tools">
                    <ul class="toolbar">
                        <li class="click"><a href="javascript:void(0);" onclick="add();"><span><img
                                src="${pageContext.request.contextPath }/images/add.png"></span>添加</a></li>
                        <li class="click"><a href="javascript:void(0);" onclick="edit();"><span><img
                                src="${pageContext.request.contextPath }/images/Mod.png"></span>修改</a></li>
                        <li><a href="javascript:void(0);" onclick="del();"><span><img
                                src="${pageContext.request.contextPath }/images/delete.png"></span>删除</a></li>
                        <li><a href="javascript:void(0);" onclick="playVideo();"><span><img
                                src="${pageContext.request.contextPath }/img/btn-play.png"></span>播放</a></li>

                        <li>
                    </ul>
                </div>
            </td>
            <td align="right">
                视频名称<input type="text" name="movieName" id="movieName" value="${movie.movieName}"/>
                <input type="submit" value="查询">
            </td>
        </tr>
    </form>
</table>
<table class="easyui-datagrid" pagination="true" id="changesize" style="width:auto;padding:0px" singleSelect="false"
       data-options="onClickRow:getRowData">
    <thead>
    <tr>
        <th field="id" checkbox="true" width=50>选择</th>
        <th field="title" width=200 align="center">视频标题</th>
        <th field="description" width=80 align="center">视频描述</th>
        <th field="movieName" width=80 align="center">所属电影</th>
        <th field="likeCount" width=80 align="center">喜欢人数</th>
        <th field="userName" width=80 align="center">发布的用户</th>
        <th field="createTime" width=160 align="center">上传时间</th>
        <th field="cimg" nowrap align="center">封面图</th>
        <th field="url"  nowrap align="center">视频地址</th>

    </tr>
    </thead>
    <tbody>
    <c:forEach items="${videos}" var="v">
        <tr>
            <td>${v.vid }</td>
            <td>${v.title }</td>
            <td>${v.description }</td>
            <td>${v.movieName }</td>
            <td>${v.likecount }</td>
            <td>${v.userName }</td>
            <td><fmt:formatDate value="${v.createtime}" type="date" pattern="yyyy-MM-dd hh:mm:ss"/></td>
            <td><img src="${pageContext.request.contextPath }/${v.coverImage}" height="50"></td>
            <td>${v.url}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<div  id="video-window" closed="true" class="easyui-window" title="666" style="width:600px;height:400px"
     data-options="iconCls:'icon-save',modal:true">

    <video  autoplay="autoplay" id="video" width="100%" height="100%"  controls="controls">
    </video>

</div>

</body>
</html>